<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="./JS/Vector2.js" type="text/javascript"></script>
    <script src="./JS/tools.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    var cycle = 60;

    var Ball = function(x,y){
        this.x = x;
        this.y = y;
        this.vX = getRandomNumber(-100,100);
        this.vY = getRandomNumber(5,5);
    };
    var one = []; one.push({ x: 3, y: 0 }); one.push({ x: 3, y: 1 }); one.push({ x: 3, y: 2 }); one.push({ x: 3, y: 3 }); one.push({ x: 3, y: 4 }); one.push({ x: 3, y: 5 }); one.push({ x: 3, y: 6 }); var two = []; two.push({ x: 0, y: 0 }); two.push({ x: 1, y: 0 }); two.push({ x: 2, y: 0 }); two.push({ x: 3, y: 0 }); two.push({ x: 3, y: 1 }); two.push({ x: 3, y: 2 }); two.push({ x: 3, y: 3 }); two.push({ x: 2, y: 3 }); two.push({ x: 1, y: 3 }); two.push({ x: 0, y: 3 }); two.push({ x: 0, y: 4 }); two.push({ x: 0, y: 5 }); two.push({ x: 0, y: 6 }); two.push({ x: 1, y: 6 }); two.push({ x: 2, y: 6 }); two.push({ x: 3, y: 6 }); var three = []; three.push({ x: 0, y: 0 }); three.push({ x: 1, y: 0 }); three.push({ x: 2, y: 0 }); three.push({ x: 3, y: 0 }); three.push({ x: 3, y: 1 }); three.push({ x: 3, y: 2 }); three.push({ x: 3, y: 3 }); three.push({ x: 2, y: 3 }); three.push({ x: 1, y: 3 }); three.push({ x: 0, y: 3 }); three.push({ x: 3, y: 4 }); three.push({ x: 3, y: 5 }); three.push({ x: 0, y: 6 }); three.push({ x: 1, y: 6 }); three.push({ x: 2, y: 6 }); three.push({ x: 3, y: 6 }); var four = []; four.push({ x: 0, y: 0 }); four.push({ x: 0, y: 1 }); four.push({ x: 0, y: 2 }); four.push({ x: 0, y: 3 }); four.push({ x: 1, y: 3 }); four.push({ x: 2, y: 3 }); four.push({ x: 3, y: 3 }); four.push({ x: 3, y: 4 }); four.push({ x: 3, y: 5 }); four.push({ x: 3, y: 6 }); four.push({ x: 3, y: 0 }); four.push({ x: 3, y: 1 }); four.push({ x: 3, y: 2 }); var five = []; five.push({ x: 0, y: 0 }); five.push({ x: 1, y: 0 }); five.push({ x: 2, y: 0 }); five.push({ x: 3, y: 0 }); five.push({ x: 0, y: 1 }); five.push({ x: 0, y: 2 }); five.push({ x: 3, y: 3 }); five.push({ x: 2, y: 3 }); five.push({ x: 1, y: 3 }); five.push({ x: 0, y: 3 }); five.push({ x: 3, y: 4 }); five.push({ x: 3, y: 5 }); five.push({ x: 0, y: 6 }); five.push({ x: 1, y: 6 }); five.push({ x: 2, y: 6 }); five.push({ x: 3, y: 6 }); var six = []; six.push({ x: 0, y: 0 }); six.push({ x: 1, y: 0 }); six.push({ x: 2, y: 0 }); six.push({ x: 3, y: 0 }); six.push({ x: 0, y: 1 }); six.push({ x: 0, y: 2 }); six.push({ x: 3, y: 3 }); six.push({ x: 2, y: 3 }); six.push({ x: 1, y: 3 }); six.push({ x: 0, y: 3 }); six.push({ x: 3, y: 4 }); six.push({ x: 3, y: 5 }); six.push({ x: 0, y: 6 }); six.push({ x: 1, y: 6 }); six.push({ x: 2, y: 6 }); six.push({ x: 3, y: 6 }); six.push({ x: 0, y: 4 }); six.push({ x: 0, y: 5 }); var seven = []; seven.push({ x: 3, y: 0 }); seven.push({ x: 3, y: 1 }); seven.push({ x: 3, y: 2 }); seven.push({ x: 3, y: 3 }); seven.push({ x: 3, y: 4 }); seven.push({ x: 3, y: 5 }); seven.push({ x: 3, y: 6 }); seven.push({ x: 0, y: 0 }); seven.push({ x: 1, y: 0 }); seven.push({ x: 2, y: 0 }); var eight = []; eight.push({ x: 0, y: 0 }); eight.push({ x: 1, y: 0 }); eight.push({ x: 2, y: 0 }); eight.push({ x: 3, y: 0 }); eight.push({ x: 0, y: 1 }); eight.push({ x: 0, y: 2 }); eight.push({ x: 3, y: 3 }); eight.push({ x: 2, y: 3 }); eight.push({ x: 1, y: 3 }); eight.push({ x: 0, y: 3 }); eight.push({ x: 3, y: 4 }); eight.push({ x: 3, y: 5 }); eight.push({ x: 0, y: 6 }); eight.push({ x: 1, y: 6 }); eight.push({ x: 2, y: 6 }); eight.push({ x: 3, y: 6 }); eight.push({ x: 0, y: 4 }); eight.push({ x: 0, y: 5 }); eight.push({ x: 3, y: 1 }); eight.push({ x: 3, y: 2 }); var nine = []; nine.push({ x: 0, y: 0 }); nine.push({ x: 1, y: 0 }); nine.push({ x: 2, y: 0 }); nine.push({ x: 3, y: 0 }); nine.push({ x: 0, y: 1 }); nine.push({ x: 0, y: 2 }); nine.push({ x: 3, y: 3 }); nine.push({ x: 2, y: 3 }); nine.push({ x: 1, y: 3 }); nine.push({ x: 0, y: 3 }); nine.push({ x: 3, y: 4 }); nine.push({ x: 3, y: 5 }); nine.push({ x: 0, y: 6 }); nine.push({ x: 1, y: 6 }); nine.push({ x: 2, y: 6 }); nine.push({ x: 3, y: 6 }); nine.push({ x: 3, y: 1 }); nine.push({ x: 3, y: 2 }); var zero = []; zero.push({ x: 0, y: 0 }); zero.push({ x: 1, y: 0 }); zero.push({ x: 2, y: 0 }); zero.push({ x: 3, y: 0 }); zero.push({ x: 0, y: 1 }); zero.push({ x: 0, y: 2 }); zero.push({ x: 3, y: 3 }); zero.push({ x: 0, y: 3 }); zero.push({ x: 3, y: 4 }); zero.push({ x: 3, y: 5 }); zero.push({ x: 0, y: 6 }); zero.push({ x: 1, y: 6 }); zero.push({ x: 2, y: 6 }); zero.push({ x: 3, y: 6 }); zero.push({ x: 0, y: 4 }); zero.push({ x: 0, y: 5 }); zero.push({ x: 3, y: 1 }); zero.push({ x: 3, y: 2 });
    var num = [];
    for(var t=0;t<10;t++){
        switch(t){
            case 1: num[1] = one;
                break;
            case 2: num[2] = two;
                break;
            case 3: num[3] = three;
                break;
            case 4: num[4] = four;
                break;
            case 5: num[5] = five;
                break;
            case 6: num[6] = six;
                break;
            case 7: num[7] = seven;
                break;
            case 8: num[8] = eight;
                break;
            case 9: num[9] = nine;
                break;
            case 0: num[0] = zero;
                break;
        }
    }
    var Balls = [];
    for(var t=0;t<10;t++){
        var bs = [];
        for(var n in num[t]){
            var ball = new Ball(num[t][n].x*20+100,num[t][n].y*20+100);
            bs.push(ball);
        }
        Balls[t] = bs;
    }

    var dropBalls = [];
    
    var index = 0;
    var number = 0;
    var balls = [];
    var s = setInterval(function(){

        //控制显示的球
        index += cycle;
        if(index >= 1000){
            number = number%10;

            var preBalls = balls;
            balls = [];
            balls = Balls[number];

            //只让不重叠的球掉下来
            for(var t in preBalls){
                var flag = true;
                for(var tt in balls){
                    if(preBalls[t].x == balls[tt].x && preBalls[t].y == balls[tt].y){
                        flag = false;
                    }
                }
                if(flag){
                    dropBalls.push(new Ball(preBalls[t].x,preBalls[t].y));
                }
            }

            index = 0;
            number++ ;
        };

        //绘制球
        ctx.fillStyle = "black";
        ctx.fillRect(0,0,c.width,c.height);
        ctx.fillStyle = "green";
        for(var t in balls){

            ctx.beginPath();
            ctx.arc(balls[t].x,balls[t].y,10,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();

        };

        for(var t=dropBalls.length-1;t>=0;t--){
            ctx.beginPath();
            ctx.arc(dropBalls[t].x,dropBalls[t].y,10,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            dropBalls[t].x += dropBalls[t].vX*cycle/1000;
            dropBalls[t].y += dropBalls[t].vY*cycle/1000;

            //删除看不到的球
            if(dropBalls[t].x + 10 < 0 || dropBalls[t].x > 400){
                dropBalls.splice(t,1);
            };
            //与地面碰撞
            if(dropBalls[t].y > c.height - 10){
                dropBalls[t].vY *= -0.7;
                dropBalls[t].y = c.height - 10;
            }else{
                dropBalls[t].vY += 50;
            };
        };

    },cycle);

</script>
</body>
</html>